﻿<section class="upload-album-page" ng-controller="UploadAlbumController as vm">
    <div class="row">
        <div class="col-sm-offset-1 col-sm-10">
            <h2>Upload an album</h2>
            <form>
                <div class="form-group">
                    <label>Album name</label>
                    <input class="form-control" placeholder="Album name" ng-model="vm.albumName">
                </div>
                <div class="form-group">
                    <label>Album art</label>
                    <br ng-show="vm.albumArt" />
                    <img class="album-art" ng-show="vm.albumArt" ng-src="{{vm.albumArt.url}}" />
                    <div style="width: 300px; padding: 10px;" ng-style="{ 'background-color': vm.backColor, 'color': vm.foreColor }">
                        <div ng-show="vm.albumArt" ng-style="{ 'text-shadow': '0 0 5px ' + vm.textShadowColor }">
                            {{vm.songs[0].name || 'Song Name Here'}}
                            <br />
                            <span ng-style="{ 'color': vm.mutedColor }">By</span>
                            {{vm.artist.Name || 'Joseph A. Artist'}}
                            <br />
                            <span ng-style="{ 'color': vm.mutedColor }">on</span>
                            {{vm.albumName || 'Some New Album'}}
                        </div>
                    </div>
                    <br />
                    <button class="btn btn-default" ng-click="vm.chooseAlbumArt()">Choose album art...</button>
                    <div ng-show="vm.albumArt">
                        <label>Fore</label>
                        <input type="color" ng-model="vm.foreColor" />
                        <label>Background</label>
                        <input type="color" ng-model="vm.backColor" />
                        <label>Muted</label>
                        <input type="color" ng-model="vm.mutedColor" />
                        <label>Text shadow</label>
                        <input type="color" ng-model="vm.textShadowColor" />
                    </div>
                </div>
                <div class="form-group">
                    <label>Songs</label>
                    <ul>
                        <li ng-repeat="song in vm.songs">
                            <input type="text" class="form-control" ng-model="song.filename" />
                            <br />
                            <audio preload="none" controls ng-src="{{song.trustedUrl}}" />
                        </li>
                    </ul>
                    <button class="btn btn-default" ng-click="vm.chooseSongs()">Choose songs...</button>
                </div>
                <div class="form-group">
                    <label>Artist</label>
                    <select class="form-control" ng-model="vm.artist" ng-options="artist.Name for artist in vm.allArtists">
                        <option value="">Select an artist...</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Purchase URL</label>
                    <input class="form-control" placeholder="Purchase URL" ng-model="vm.purchaseUrl">
                </div>
                <div class="form-group">
                    <label>Genre</label>
                    <select class="form-control" ng-model="vm.genre" ng-options="genre for genre in vm.allGenres">
                        <option value="">Select a genre...</option>
                    </select>
                </div>
                <button type="submit" class="btn btn-primary" ng-click="vm.upload()" ng-disabled="vm.isUploading">Upload</button>
            </form>
        </div>
    </div>
</section>

<script type="text/javascript" async src="http://api.filepicker.io/v1/filepicker.js"></script>